<template>
  <div>
    <login-top middleTop="注册bilibili">
      <div
        class="login"
        slot="right"
        style="font-size: 3.311vw"
        @click="$router.push('/login')"
      >
        登录
      </div>
    </login-top>
    <login-text
      label="姓名"
      placeholder="请输入姓名"
      type="text"
      rule="^.{6,16}$"
      style="margin: 4.167vw 0"
      @inputChange="(res) => (model.name = res)"
    ></login-text>
    <login-text
      label="账号"
      placeholder="请输入账号"
      type="text"
      rule="^.{6,16}$"
      style="margin: 4.167vw 0"
      @inputChange="(res) => (model.username = res)"
    ></login-text>
    <login-text
      label="密码"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}$"
      @inputChange="(res) => (model.password = res)"
    ></login-text>
    <!-- 或者<LoginTop> </LoginTop> -->
    <login-btn btnText="注册" @loginSubmit="loginSubmit"></login-btn>
  </div>
</template>

<script>
import LoginTop from "../components/common/LoginTop.vue";
import LoginText from "../components/common/LoginText.vue";
import LoginBtn from "../components/common/LoginBtn.vue";
import fn from "../../test";

export default {
  data() {
    return {
      model: {
        name: "",
        username: "",
        password: "",
      },
    };
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn,
  },
  methods: {
    async loginSubmit() {
      fn().then((a) => {
        console.log(a);
      });
      let rulg = /^.{6,16}$/;
      if (
        rulg.test(this.model.name) &&
        rulg.test(this.model.username) &&
        rulg.test(this.model.password)
      ) {
        // console.log('正则全部校验成功');
        const res = await this.$http.post("/LoginPage", this.model);
        this.$msg.fail(res.data.msg);
        localStorage.setItem("id", res.id);
        localStorage.setItem("token", res.objtoken);
        setTimeout(() => {
          this.$router.push('/userinfo')
        }, 1000);
      } else {
        this.$msg.fail("格式不正确，请重新输入");
      }
    },
  },
};
</script>

<style>
.login {
  line-height: 43px;
  color: lightskyblue;
}
</style>